/**
 * Created by user on 2018/4/25.
 */
/**
 * Created by hao.cheng on 2017/4/13.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Layout, Menu, Icon } from 'antd'
import { Link } from 'react-router'
const { Sider } = Layout
const SubMenu = Menu.SubMenu
import { MenuActions } from '../../actions'
import styles from './menu.less'

class CustomMenu extends Component {
  state = {
    collapsed: false,
    mode: 'inline',
    firstHide: true       // 点击收缩菜单，第一次隐藏展开子菜单，openMenu时恢复
  };
  componentDidMount() {
    const { path } = this.props
    this.initMenu(path)
  }
  componentWillReceiveProps(nextProps) {

    const { path:nextPath } = nextProps
    const { path:currentPath } = this.props
    if (currentPath !== nextPath) {
      this.initMenu(nextPath)
    }
  }
  initMenu(path) {
    const { dispatch, openKey } = this.props
    const { changeSelectKey, changeOpenKey } = MenuActions
    const currentOpen = path.substr(0, path.lastIndexOf('/'))
    const currentselect = path
    dispatch(changeOpenKey(currentOpen))
    dispatch(changeSelectKey(currentselect))
  }
  menuClick = e => {
    const selected = e.key
    const { dispatch, openKey } = this.props
    const { changeSelectKey, changeOpenKey } = MenuActions
    if (selected.indexOf(openKey[0]) < 0) {
      dispatch(changeOpenKey(null))
    }
    dispatch(changeSelectKey(selected))

  }
  openMenu = (v) => {
    const { dispatch } = this.props
    const { changeOpenKey } = MenuActions
    dispatch(changeOpenKey(v[v.length-1]))
  };
  render() {
    const { collapsed, selectKey, openKey } = this.props
    return (
      <Sider
        trigger={null}
        breakpoint="lg"
        collapsed={collapsed}
        style={{overflowY: 'auto'}}
      >
        <div className={styles.menu_logo}>LOGO</div>
        <Menu
          onClick={this.menuClick}
          theme="dark"
          mode="inline"
          selectedKeys={selectKey}
          openKeys={openKey}
          onOpenChange={this.openMenu}
        >
          <Menu.Item key="/app/dashboard/index">
            <Link to={'/app/dashboard/index'}><Icon type="mobile" /><span className="nav-text">首页</span></Link>
          </Menu.Item>
          <SubMenu
            key="/app/weibo"
            title={<span><Icon type="weibo" /><span className="nav-text">微博</span></span>}
          >
            <Menu.Item key="/app/weibo/index"><Link to={'/app/weibo/index'}>首页主页</Link></Menu.Item>
          </SubMenu>
          <SubMenu
            key="/app/weixin"
            title={<span><Icon type="wechat" /><span className="nav-text">微信</span></span>}
          >
            <Menu.Item key="/app/weixin/index"><Link to={'/app/weixin/index'}>微信主页</Link></Menu.Item>
          </SubMenu>
          <SubMenu
            key="/app/tuniu"
            title={<span><Icon type="zhihu" /><span className="nav-text">途牛</span></span>}
          >
            <Menu.Item key="/app/tuniu/index"><Link to={'/app/tuniu/index'}>途牛主页</Link></Menu.Item>
          </SubMenu>
          <Menu.Item key="/app/record/index">
            <Link to={'/app/record/index'}><Icon type="compass" /><span className="nav-text">记录</span></Link>
          </Menu.Item>
        </Menu>
      </Sider>
    )
  }
}

const mapState = (state) => {
  const { collapsed, selectKey, openKey } = state.MenuState
  return {
    collapsed, selectKey, openKey
  }
}

export default connect(mapState)(CustomMenu)
